<template>
  <div class="box">  
    <div class="left">头像</div>
    <div class="rig">
       <span>昵称：</span>
       <span> 手机号：</span>
    </div>
  </div>
  <div class="Tab">
    <div class="tab">
  <el-table :data="tableData" style="width: 98% ;" border :cell-style="cellStyle" :show-header="false"	>
    <el-table-column prop="date" label="Date" min-width="120" />
    <el-table-column prop="name" label="Name"  min-width="110"/>
    <el-table-column prop="address" label="Address" min-width="100" />
    <el-table-column prop="date" label="Date" min-width="100" />
    <el-table-column prop="name" label="Name" min-width="100" />
    <el-table-column prop="address" label="Address" min-width="100" />
  </el-table>
</div>
</div>
</template>

<script  setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
 function cellStyle({row, column, rowIndex, columnIndex}){
  if(columnIndex%2==0){
 return {background: "#f5f5f5"}
  }
 }
</script>

<style  scoped>
.box{
  background-color:white;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content:space-between;
  border-radius: 10px;

}
.Tab{
  padding: 20px;
  margin-top: 10px;
  width: 100%;
  height: 65vh;
  background-color:white;
  border-radius: 5px;
}
.tab{
  padding: 20px;
}
</style>
